<docs>
  ## 编辑基本个人信息模块
</docs>
<template>
  <div>
    <div class="beijingtu"></div>
    <div class="bg_g">
      <co-form :model="data" :rules="rules" ref="form">
        <!-- 基本个人信息 -->
        <div class="box1">
          <div class="title clearfix">
            <!-- <div class="person"></div> -->
            <label class="person" for="id_avatar">
              <img v-if="!imgShow" class="person" :src="imgSrc" alt />
              <img v-if="imgShow" src="~common/images/tx.png" alt />
              <div class="name1">修改头像</div>
            </label>

            <input
              type="file"
              id="id_avatar"
              name="file"
              accept="image/*"
              ref="uploadFile"
              @change="J_upload()"
              style="display:none"
            />
          </div>
          <!-- 姓名 -->
          <div class="box3 mtop boild">
            <div class="describe">姓名</div>
            <div class="name">{{data.xm}}</div>
          </div>
          <!-- 身份证号 -->
          <div class="box3 boild">
            <div class="describe">身份证号</div>
            <div class="name">{{data.sfzhm}}</div>
          </div>
          <div class="box3 boild">
            <div class="describe">手机</div>
            <div class="name">{{data.sj}}</div>
          </div>

          <div class="box3 boild">
            <div class="describe">出生年月</div>
            <div class="name">{{data.csny}}</div>
          </div>
          <div class="box4">
            <div class="describe">性别</div>
            <div class="name">{{data.xbmc}}</div>
          </div>
        </div>

        <div class="weui-cell weui-cell_switch switch_padding">
          <div class="weui-cell__bd">是否允许单位主动找您</div>
          <div class="weui-cell__ft">
            <input class="weui-switch" type="checkbox" v-model="switch_flag"/>
          </div>
        </div>

        <div class="box1">
          <div class="box2 boild">
            <div class="describe">
              生源所在地
              <span>(必填)</span>
            </div>
            <div class="picker" ref="picker">
              <span id="trigger2" class="_input clearfix" v-model="data.syszd">{{data.syszdmc}}</span>
            </div>
          </div>

          <div class="box2 boild">
            <div class="describe">
              居住地址
              <span>(必填)</span>
            </div>
            <co-input prop="jzdz" v-model="data.jzdz " placeholder="请输入"></co-input>
          </div>
        <div class="box2 boild">
            <div class="describe">
              Email
              <span>(必填)</span>
            </div>
            <co-input prop="yx" v-model="data.yx " placeholder="请输入"></co-input>
          </div>
          
            <div class="box2">
            <div class="describe">家庭电话</div>
            <co-input prop="jtdh" v-model="data.jtdh" placeholder="请输入"></co-input>
          </div>
         
        </div>
        <div class="box1">
          <div class="box2 boild">
            <div class="describe">
              毕业学校
              <span>(必填)</span>
            </div>
            <co-input prop="byxx" v-model="data.byxx " placeholder="请输入"></co-input>
          </div>
          <div class="box3 boild">
            <div class="describe">
              毕业时间
              <span>(必填)</span>
            </div>
            <data-picker prop="bysj" v-model="data.bysj"></data-picker>
          </div>
          <div class="box2 boild">
            <div class="describe">
              所学专业
              <span>(必填)</span>
            </div>
            <!-- <co-select prop="sxzy" :list="sxzyList" v-model="data.sxzy"></co-select> -->
            <div class="picker" ref="picker">
              <span id="trigger3" class="_input clearfix">{{data.sxzymc}}</span>
            </div>
          </div>

          <div class="box2 boild">
            <div class="describe">
              学历
              <span>(必填)</span>
            </div>
            <co-select prop="xl" :list="xlList" v-model="data.xl"></co-select>
          </div>

          <div class="box2 mar-bottom" >
            <div class="describe">
              培养方式
              <span>(必填)</span>
            </div>
            <co-select prop="pyfs" :list="pyfsList" v-model="data.pyfs"></co-select>
          </div>
        </div>

        <div class="box1">
          <div class="box2 boild">
            <div class="describe">
              民族
              <span>(必填)</span>
            </div>
            <co-select prop="mz" :list="mzList" v-model="data.mz"></co-select>
          </div>
          <!-- 身份证号 -->
          <div class="box2">
            <div class="describe">
              政治面貌
              <span>(必填)</span>
            </div>
            <co-select prop="zzmm" :list="mmList" v-model="data.zzmm"></co-select>
          </div>
        </div>

               <div class="box1">
          <div class="box2">
            <div class="describe">汽车驾照</div>
            <co-select prop="qcjz" :list="jzList" v-model="data.qcjz"></co-select>
          </div>
        </div>

        <div class="box1">
          <div class="box2 boild">
            <div class="describe">
              身高
              <span class="nored" style="color:#666666">(cm)</span>
            </div>
            <co-input prop="sg" v-model="data.sg " placeholder="请输入"></co-input>
          </div>

          <div class="box2">
            <div class="describe">
              体重
              <span class="nored" style="color:#666666">(kg)</span>
            </div>
            <co-input prop="tz" v-model="data.tz" placeholder="请输入"></co-input>
          </div>
        </div>

        <!-- <div class="box1">
        
        </div> -->

 
      </co-form>
    </div>
    <div class="bottom"></div>
    <div class="info-bottom">
      <button class="boild" @click.prevent="POST_submit()">保&nbsp;&nbsp;存</button>
    </div>
  </div>
</template>
<script>
import $ from "@/common/js/axios";
import coForm from "@/base/form/form";
import coInput from "@/base/form/input";
import { validator } from "@/common/js/valid";
import { mixinValid } from "@/common/mixins/mixins";
import dataPicker from "@/base/form/dataPickerNew";
import coSelect from "@/base/form/select";
import PickerExtend from "picker-extend"; //行政区划插件
export default {
  components: { coInput, coForm, dataPicker, coSelect },
  data() {
    return {
      // 性别数组
      sxzyList: [], //所学专业
      csList: [], // 生源所在地
      osList: [], // 居住地址
      xbList: [],
      xlList: [], //学历
      pyfsList: [], // 培养方式
      mzList: [], // 民族
      mmList: [], // 政治面貌
      jzList: [], // 驾照
      sxzyhxList:[],  // 所学专业回显list
      imgShow: true,
      positionArr: [], //城区数据回显
      positionArr1:[], // 所学专业数据回显
      imgSrc: "",
      imgSrcName: "",
      switch_flag:"",
      data: {
        mz: "",
        zzmm: "",
        xl: "",
        pyfs: "",
        byxx: "",
        bysj: "",
        sxzy: "",
        qcjz: "",
        sg: "",
        tz: "",
        sj: "",
        jtdh: "",
        yx: "",
        jzdz: ""
      },
      rules: {
        mz: validator('2,"number","民族",false'),
        zzmm: validator('2,"number","政治面貌",false'),
        xl: validator('2,"number","学历",false'),
        pyfs: validator('2,"number","培养方式",false'),
        byxx: validator('64,"full","毕业学校",false'),
        bysj: validator('7,"full","毕业时间",false'),
        sxzy: validator('64,"full","所学专业",false'),
        yx: validator('48,"email","邮箱",false'),
        jzdz: validator('64,"full","居住地址",false'),
        sj: validator('11,"number","手机",false'),
        jtdh: validator('32,"lxdh","家庭电话",true'),
        qcjz: validator('2,"number","汽车驾照",true'),
        sg: validator('3,"number","身高",true'),
        tz: validator('5,"number","体重",true')
      }
    };
  },
  computed: {},
  methods: {
    // 保存
    POST_submit() {
      this.data.sfyxbs = this.switch_flag === true ? "1" : "0";
      this.$refs.form.validate(() => {
        $.post("/wdjl/jbxxBc", this.data).then(res => {
          const flag = parseInt(res.returnData.executeResult, 10);
          if (flag === 1) {
            this.$alert(
              {
                type: "success",
                message: res.returnData.message
              },
              () => {
                this.$router.push({ path: "/cvitae" });
              }
            );
          } else {
            this.$alert({
              type: "warning",
              message: res.returnData.message
            });
          }
        });
      });
    },
    J_upload() {
      this.$loading = true;
      var formData = new FormData();
      formData.append("file", this.$refs.uploadFile.files[0]);
      $.post("/wdjl/txsc", formData, {
        "Content-Type": "application/x-www-form-urlencoded"
      })
        .then(res => {
          const flag = parseInt(res.returnData.executeResult, 10);
          if (flag === 1) {
            if (res.returnData.sfname) {
              this.imgSrc = 
                conf.urlPrefix + "/sysfiles/tx/" + res.returnData.sfname;
              this.imgShow = false;
              this.data.txurl = res.returnData.sfname;
            }
            this.$alert({
              type: "success",
              message: res.returnData.message
            });
          } else {
            this.$alert({
              type: "warning",
              message: res.returnData.message
            });
          }
        })
        .finally(() => {
          this.$loading = false;
        });
    },

    // 获取学历的代码表、
    getxl() {
      $.get("/dmb/dmblbCx", { params: { dmbmc: "byskzzp_d_xl" } }).then(res => {
        this.xlList = res.returnData.dmblb;
      });
    },
    // 培养方式代码表
    getpyfs() {
      $.get("/dmb/dmblbCx", { params: { dmbmc: "byskzzp_d_pyfs" } }).then(
        res => {
          this.pyfsList = res.returnData.dmblb;
        }
      );
    },

    // 汽车驾照
    getjz() {
      $.get("/dmb/dmblbCx", { params: { dmbmc: "byskzzp_d_qcjz" } }).then(
        res => {
          this.jzList = res.returnData.dmblb;
        }
      );
    },
    // 民族
    getmz() {
      $.get("/dmb/dmblbCx", { params: { dmbmc: "cdg_nation" } }).then(res => {
        this.mzList = res.returnData.dmblb;
      });
    },
    //政治面貌
    getmm() {
      $.get("/dmb/dmblbCx", { params: { dmbmc: "byskzzp_d_zzmm" } }).then(
        res => {
          this.mmList = res.returnData.dmblb;
        }
      );
    },
    // 行政区划代码表
    getaddList() {
      $.get("/dmb/xzyh2jCx").then(res => {
        // 生源所在地
        this.csList = res.returnData.xzqhlb;
        // 居住地址
        let posiArr = this.randerPosition(this.csList, this.data.syszd);
        this.xzqh(this.csList, posiArr);
      });
    },
     // 行政代码表数据回显
     randerPosition(all, tarid) {
      let _tarid = tarid || "110000000000";    // 市的id值   调用dgarr的时候要先调 用省级item1 在调用市级traid
      let _item1 = _tarid.substring(0, 3) + "000000000";
      this.dgArr(all, _item1);
       this.dgArr(all, _tarid);
       return this.positionArr;
    },
    dgArr(all, str) {
      all.forEach((item, index) => {
        if (item.id == str) {
          this.positionArr.push(index);
          return;
        } else if (item.children) {
          this.dgArr(item.children, str);
        }
      });
    },
       // 行政区划
    xzqh(addList, posi) {
      var _this = this;
      var _position = posi || [0, 0];
      var pickerExtend = new PickerExtend({
        trigger: "#trigger2",
        title: "请选择",
        wheels: [{ data: addList }],
        keyMap: {
          id: "id",
          value: "name",
          childs: "children"
        },
        flexibleHeight: "80",
        connector: "",
        position: _position,
        callback: function(indexarr, data) {
          _this.data.syszd = data[1].id;
          // 市 Id 传给后台
        }
      });
    },
        //所学专业代码表
    getzy() {
      $.get("/dmb/zydmblbCx").then(res => {
        this.sxzyList = res.returnData.zylb;
         let posiArr2 = this.randerPosition1(this.sxzyList,this.data.lbid);
        let posiArr3 = this.randerPosition1(this.sxzyList,this.data.zlid);
        let posiArr1 = this.randerPosition1(this.sxzyList,this.data.sxzy);
          
        this.sxzy(this.sxzyList, posiArr2);
      });
    },
        // 所学专业 数据回显
    randerPosition1(all,tarid) {
      this.dgArr1(all, tarid);
      return this.positionArr1;
    },
    dgArr1(all,str) {
      all.forEach((item, index) => {
        if (item.id == str) {
          this.positionArr1.push(index);
          return;
        }else if (item.zys) {
          this.dgArr1(item.zys, str);
        }
      });
    },
      // 所学专业
    sxzy(sxzyList, posi) {
      var _this = this;
      var _position = posi || [0, 0, 0];
      var pickerExtend = new PickerExtend({
        trigger: "#trigger3",
        title: "请选择",
        wheels: [{ data: sxzyList }],
        keyMap: {
          id: "id",
          value: "mc",
          childs: "zys"
        },
        flexibleHeight: "80",
        connector: "",
        position: _position,
        callback: function(indexarr, data) {
           //要专业最小的id值
          _this.data.sxzy = data[2].id;
        }
      });
    },
    //调用简历信息查询
    getData() {
      this.$loading = true;
      $.get("/wdjl/grjbxxCx").then(res => {
        this.$loading = false;
        let _res = res.returnData;
        if (_res.executeResult == 1) {
          this.data = res.returnData.jbxx;
          this.switch_flag = this.data.sfyxbs == 1 ? true : false;
          if (this.data.syszd == "") {
            this.data.syszdmc = "请选择";
          }
          if (this.data.sxzy == "") {
            this.data.sxzymc = "请选择";
          }
          if (this.data.txurl) {
            this.imgSrc = conf.urlPrefix + "/sysfiles/tx/" + this.data.txurl;
            this.imgShow = false;
          }
        } else {
          this.$alert({
            type: "warning",
            message: _res.message
          });
        }
      });
    }
  },
  created() {
    //回显
    this.getData();
    this.getxl();
    this.getpyfs();
    this.getjz();
    this.getmz();
    this.getmm();
  },
  mounted() {
    this.getaddList();
    this.getzy();
  }
};
</script>
<style lang="scss" scoped>
@import "~common/scss/var.scss";
.describe {
  font-size: $font-size-base;
  margin: 40px 0 20px 0px;
  color: #666666;
  span {
    color: red;
    font-size: 23px;
  }
}
.boild {
  font-size: 0.42667rem;
}
.box2 {
  padding: 0 38px 10px 38px;
  // margin-bottom: 20px;
  position: relative;
}
.box4 {
  padding: 0 38px 20px 38px;
  position: relative;
}
.box3 {
  margin-bottom: 40px;
  padding: 0 38px 10px 38px;
  position: relative;
}
.boild::after {
  content: " ";
  display: inline-block;
  width: 85%;
  border-bottom: 1px solid rgba(229, 229, 229, 1);
  position: absolute;
  top: 105%;
  // right: 0.64rem;
}
#trigger2 {
  position: relative;
}
#trigger3 {
  position: relative;
}
#trigger2::after {
  content: " ";
  display: inline-block;
  height: 0.2rem;
  width: 0.2rem;
  border-width: 0.02667rem 0.02667rem 0 0;
  border-color: #555;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  -ms-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
  top: 15%;
  right: 0.64rem;
}
#trigger3::after {
  content: " ";
  display: inline-block;
  height: 0.2rem;
  width: 0.2rem;
  border-width: 0.02667rem 0.02667rem 0 0;
  border-color: #555;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  -ms-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
  top: 15%;
  right: 0.64rem;
}
.beijingtu {
  width: 100%;
  height: 880px;
  background: url("../../common/images/beijing.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: -9000;
  margin-top: -210px;
}
.bottom {
  width: 100%;
  height: 200px;
  background: url("../../common/images/dbg.png") no-repeat;
  background-size: 100%;
  // margin-top: -px;
  // margin-top: -50px;
}

.bg_g {
  padding: 0 34px;
  overflow: hidden;
  position: relative;
}
.padd {
  font-weight: bold;
  font-size: 32px;
  margin: 20px 0 66px 32px;
  display: block;
  color: #333333;
}
.mtop {
  margin-top: 1.2rem;
}

._input {
  font-weight: bold;
  font-size: 0.4rem;
  display: block;
  padding: 10px 0;
  color: #333333;
}
.name {
  font-size: $font-size-base;
  margin: 25px 0 20px 0px;
  font-weight: bold;
  color: #333333;
}
.box1 {
  // width: 90%;
  margin: 30px auto;
  background: white;
  overflow: hidden;
  border-radius: 4px;

  img {
    width: 100%;
    height: 100%;
    margin-bottom: 34px;
  }
  .title {
    margin: 56px 0;
    .person {
      display: block;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      margin: auto;
    }
    .name1 {
      display: flex;
      justify-content: center;
      font-size: 30px;
      font-weight: 400;
      margin-top: 15px;
      color: rgba(102, 102, 102, 1);
      line-height: 24px;
    }
    .personal {
      display: flex;
      justify-content: center;
      font-size: 0.4rem;
      margin-bottom: 0.8rem;
    }
  }
}
.info-bottom {
  width: 100%;
  padding: 0.26667rem;
  height: 1.68rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  font-size: 0.42667rem;
  font-weight: 400;
  position: fixed;
  bottom: 0;
}
.mar-bottom{
  margin-bottom: 30px;
}
button {
  width: 100%;
  height: 100%;
  color: #fff;
  border: 1px solid #014987;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#0a4c83),
    to(#2360fd)
  );
  background: -o-linear-gradient(left, #0a4c83, #2360fd);
  background: linear-gradient(90deg, #0a4c83, #2360fd);
}
.colo {
  color: #333333;
}
.nored {
  color: #666666;
}
.switch_padding {
  padding: 0 $line-height-txt;
  font-size: $font-size-large;
}
</style>
